<template>
  <div id="loginInputBox">
    <div v-if="!type">
      <div v-text="title"></div>
      <input type="number" v-model="phone" @input="getValue">
      <div class="closeBox" v-if="showClose" @click="clean">
        <div class="inputClose">
          <span class="inClose"></span>
        </div>
      </div>
    </div>
    <div v-else>
      <div v-text="title"></div>
      <input type="password" v-model="phone" @input="getValue">
      <div class="closeBox" v-if="showClose" @click="clean">
        <div class="inputClose" >
          <span class="inClose"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['title','type'],
  data(){
    return {
      phone:'',
      showClose:false
    }
  },
  methods:{
    clean(){
      this.phone = '';
      this.getValue();
      this.showClose = false
    },
    getValue(){
      this.$emit('getValue',this.phone)
    }
  },
  watch:{
    phone(){
      if(this.phone.length > 0){
        this.showClose = true
      }
    }
  },
  computed:{
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

  #loginInputBox{
    height: 1.7067rem;
    margin-top: 0.56rem;
    color: #939393;
    font-size: 0.44rem;
    position: relative;
    // background-color: #fff;
    input{
      height: 1rem;
      width: 100%;
      font-size: .5rem;
      font-weight: bold;
      border: 1px solid transparent;
      border-bottom: 1px solid #ededed;
      outline:none;
      // background-color: springgreen
    }
    .closeBox{
      .wh(.6rem,.6rem);
        position: absolute;
        top: 55%;
        right: 0;
      .inputClose{
        width: .44rem;
        height: .44rem;
        display: inline-block;
        background-color: #e6e6e6;
        border-radius: 50%;
      }
      .inClose{
        position: absolute;
        left: 22%;
        top:42%;
        width:0.2rem;
        height:1px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        display: inline-block;
      }
      .inClose::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width:0.2rem;
        height:1px;
        background: #fff;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
    }
  }
</style>
